<template>
  <div class="kd_search">
    <div class="kd_search_left">
      <div class="kd_search_leftTop">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="kd_search_leftBottom">
        <span>活动名称:</span>
        <el-input placeholder="活动名称" v-model="flashParams.keyword" />
      </div>
    </div>
    <div class="kd_search_right">
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="searchHandle">查询搜索</el-button>
    </div>
  </div>
  <div class="kd_username_add">
    <div class="kd_username_add_left">
      <el-icon><Tickets /></el-icon>
      <span>数据列表</span>
    </div>
    <div class="kd_username_add_right">
      <el-button @click="router.push('/sms/flashSession')">秒杀时间段列表</el-button>
      <el-button>添加活动</el-button>
    </div>
  </div>
  <el-table ref="multipleTableRef" :data="list" style="min-width: 700px" border cell-class-name="align-c">
    <el-table-column type="selection" width="40" />
    <el-table-column property="id" label="编号" />
    <el-table-column property="title" label="活动标题" />
    <el-table-column property="" label="活动状态">
      <template #default="{ row }"> 活动未开始 </template>
    </el-table-column>
    <el-table-column property="createTime" label="开始时间">
      <template #default="{ row }">
        {{ formateDate(row.createTime) }}
      </template>
    </el-table-column>
    <el-table-column property="" label="结束时间">
      <template #default="{ row }">
        {{ formateDate(row.endDate) }}
      </template>
    </el-table-column>
    <el-table-column property="" label="上线/下线">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @change="updateFn(row)"
        />
      </template>
    </el-table-column>
    <el-table-column property="" label="操作" width="180">
      <template #default>
        <el-button text type="primary" style="margin: 0">设置商品</el-button>
        <el-button text type="primary" style="margin: 0">编辑</el-button>
        <el-button text type="primary" style="margin: 0">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="kd_pagination">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="flashParams.pageSize"
        :page-sizes="[5, 10, 15]"
        small
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { getFlashListApi, setUpdateStatusApi } from "./api";
import useTable from "@/hooks/useTable";
import { formateDate } from "@/utils";
import { ElMessage, ElConfigProvider, ElMessageBox } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { useRouter } from 'vue-router'
const router = useRouter()
const flashParams = reactive<IFlashParams>({
  keyword: "",
  pageSize: 5,
});
const {
  list,
  total,
  pageNum,
  pageChangeHandle,
  pageSizeChangeHandle,
  searchHandle,
} = useTable(getFlashListApi, flashParams);
// 重置按钮
const reset = () => {
  (flashParams.keyword = ""), searchHandle();
};
// 是否修改状态
const updateFn = (row: IFlashList) => {
  ElMessageBox.confirm("是否要修改该状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(() => {
      setUpdateStatusApi(row.id, row.status)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("修改成功");
          } else {
            row.status = row.status === 0 ? 0 : 1;
            ElMessage.error("修改失败");
          }
        })
        .catch(() => {
          row.status = row.status === 0 ? 1 : 0;
        });
    })
    .catch(() => {
      row.status = row.status === 0 ? 1 : 0;
      ElMessage({
        type: "info",
        message: "取消修改",
      });
    });
};
</script>
<style lang="scss" scoped>
:deep(.align-c),
:deep(.el-table__header) {
  .cell {
    text-align: center !important;
  }
}
.kd_search {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0 0 5px 5px #eee;
  .kd_search_left {
    .kd_search_leftTop {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
        font-size: 13px;
        color: rgb(69, 69, 69);
      }
    }
    .kd_search_leftBottom {
      width: 358px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
      :deep(.el-input) {
        width: 200px;
      }
      span {
        padding-right: 10px;
        font-size: 13px;
        color: rgb(69, 69, 69);
      }
    }
  }
  .kd_search_right {
  }
}

.kd_username_add {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0 0 5px 5px #eee;
  margin: 20px 0;
  .kd_username_add_left {
    display: flex;
    align-items: center;
    span {
      padding-left: 10px;
    }
  }
  .kd_username_add_right {
  }
}
.kd_pagination {
  display: flex;
  flex-direction: row-reverse;
  padding: 20px 0 20px 20px;
}
</style>
